<script>
import { api } from '@/api';
import { chat } from '@/chat';
import { call } from '@/chat/call';
import { useAppStore } from '@/stores/app';
import { mapStores } from 'pinia';
import { Dialog, Field, Grid, GridItem, Toast, Uploader } from 'vant';

const DialogComponent = Dialog.Component

export default {
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    DialogComponent,
    Grid,
    GridItem,
    Field,
    Uploader
},
  computed: {
    ...mapStores(useAppStore),
    isGroup() {
      return this.$route.params.username?.startsWith('@TGS$')
    },
    groupId() {
      return this.userInfo?.user_name?.replace('@TGS$', '@TGS#') ?? ''
    },
    groupMemberIds() {
      return this.list.map(item => item.user_name).filter(item => item !== this.appStore.userInfo.username)
    }
  },
  data() {
    return {
      show: false,
      amount: 0,
      list: []
    }
  },
  methods: {
    async afterRead({ file }) {
      const { url } = await api.upload(file)
      chat.sendMessage({
        to: this.userInfo.user_name,
        type: 'image',
        msg: url,
        isGroup: this.isGroup
      })
      this.$emit('sended')
    },
    async handleSendRedEnvelope() {
      const { success, msg, fingerPrint } = await api.chat.sendRedEnvelope({ to: this.userInfo.user_name, price: this.amount })

      if (success) {
        chat.sendMessage({
          to: this.userInfo.user_name,
          type: 'red-envelope',
          msg: this.amount,
          fingerPrint,
          isGroup: this.isGroup
        })
        this.appStore.refreshBalance()
        this.$emit('sended')
      } else {
        Toast.fail({ message: msg ?? '红包发送失败' })
      }
    },
    async updateGroupMembers() {
      const { data } = await api.group.memberList({ GroupId: this.groupId })
      this.list = data
    },
    async handleCallVoice() {
      await this.updateGroupMembers()
      const username = this.isGroup ? this.groupMemberIds : this.userInfo.user_name
      call(username, true, this.isGroup ? this.groupId : undefined)
    },
    async handleCallVideo() {
      await this.updateGroupMembers()
      const username = this.isGroup ? this.groupMemberIds : this.userInfo.user_name
      call(username, false, this.isGroup ? this.groupId : undefined)
    }
  },
}
</script>

<template>
  <div class="spec-msg-panel">
    <Grid>
      <GridItem icon="photo-o" text="图片" @click="$refs.uploader.chooseFile()">
        <template #icon>
          <img style="width: 50px;" src="../assets/icons/grid-image.png" alt="">
        </template>
      </GridItem>
      <GridItem icon="phone-o" text="语音通话" @click="handleCallVoice">
        <template #icon>
          <img style="width: 50px;" src="../assets/icons/grid-voice.png" alt="">
        </template>
      </GridItem>
      <GridItem icon="cash-o" text="红包" @click="show = true">
        <template #icon>
          <img style="width: 50px;" src="../assets/icons/grid-red-envelope.png" alt="">
        </template>
      </GridItem>
      <!-- <GridItem icon="video-o" text="视频通话" @click="handleCallVideo">
        <template #icon>
          <img style="width: 50px;" src="../assets/icons/grid-video.png" alt="">
        </template>
      </GridItem> -->
    </Grid>

    <Uploader ref="uploader" :after-read="afterRead" style="display: none;" />

    <DialogComponent
      v-model="show" title="发红包"
      :show-confirm-button="amount <= appStore.balance && amount > 0"
      show-cancel-button
      @confirm="handleSendRedEnvelope"
    >
      <Field
        v-model="amount"
        label="红包金额"
        type="number"
        placeholder="请输入红包金额"
        input-align="right"
        :error="amount > appStore.balance"
        :error-message="amount > appStore.balance ? '余额不足' : ''"
        error-message-align="right"
      >
      </Field>
    </DialogComponent>
  </div>
</template>

<style lang="less" scoped>
.spec-msg-panel {
  width: 100%;
  height: 200px;
  background-color: white;
}
</style>
